<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
     <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
    <style type="text/css">
    	.mui-content{
    		margin=top:10px;
    	}
    	#class{
    		width:100%;
    	}
    	#class a{
    		display:inline-block;
    		height:30px;
    		line-height:30px;
    		color:#000;
    		width:18%;
    		text-align:center;
    	}
    	.class .title{
    		/*margin:0 auto;*/
    		text-align:center;
    	}
    	.title{
    		width:98%;
    		height:30px;
    		line-height:30px;
    		display:inline-block;
    		background-color:#4CD964;
    	}
    	#footer{
    		width:100%;
    		height:50px;
    		background-color:#007AFF;
    		color:#fff;
    		text-align:center;
    		line-height:50px;
    	}
    	#footer h3{
    		line-height:50px;
    	}
    	.comment{
    		width:100%;
    		position:fixed;
    		bottom: 0px;
    	}
    	.comment input{
    		margin-bottom: 0px;
    		float:left;
    		width:75%;
    	}
    	.comment button{
    		width:25%;
    	}
    </style>
    
</head>
<body>
<header class="mui-bar mui-bar-nav">
	 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
     <h1 class="mui-title">
        <font size="5">
    		<b><i>TennisWorld</i></b>  
    	</font></h1>
</header>	
    <div class="mui-content">
        <div id="main">
        	<h3>111111</h3>
        	<p>2016-10-10<span>TennisWorld</span></p>
        	<div id="content">
        		<p>
        			222222
        			2222222222
        			2222222222
        			22222222222
        			222222222
        			222222222
        		</p>
        	</div>
        	<p><span>点赞:</span><span>踩</span></p>
        </div>
        <div id="comment">
             <ul class="mui-table-view">
                     <li class="mui-table-view-cell">
                             <p>Item 1<span style="float:right">2019-10-19</span></p>  
                             <p>123456</p>
                     </li>
                     <li class="mui-table-view-cell">
                              Item 2
                     </li>
                     <li class="mui-table-view-cell">
                              Item 3
                     </li>
                 </ul>
        </div>
        <div class="comment">
        	<input type="text" class="mui-input-clear" placeholder="input" style="float:left;width:75%"><button style="width:25%;float:right" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
        </div>
        <div id="footer">
        	<h3>TennnisWorld版权所有</h3>
        </div>
    </div>
     <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon iconfont icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-game"></span>
            <span class="mui-tab-label">赛事</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-player"></span>
            <span class="mui-tab-label">球员</span>
        </a>
    </nav>
</body>
</html>